<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>电商用户分析可视化展示</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="robots" content="all,follow">
		<!-- Bootstrap CSS-->
		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
		<!-- Font Awesome CSS-->
		<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
		<!-- Fontastic Custom icon font-->
		<link rel="stylesheet" href="css/fontastic.css">
		<!-- Google fonts - Poppins -->
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
		<!-- theme stylesheet-->
		<link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
		<!-- Custom stylesheet - for your changes-->
		<link rel="stylesheet" href="css/custom.css">
		<!-- Favicon-->
		<link rel="shortcut icon" href="img/favicon.ico">
	</head>
	<body>
		<div class="page">
			<!-- Main Navbar-->
			<header class="header">
				<nav class="navbar">
					<!-- Search Box-->
					<div class="search-box">
						<button class="dismiss"><i class="icon-close"></i></button>
						<form id="searchForm" action="#" role="search">
							<input type="search" placeholder="搜索关键词" class="form-control">
						</form>
					</div>
					<div class="container-fluid">
						<div class="navbar-holder d-flex align-items-center justify-content-between">
							<!-- Navbar Header-->
							<div class="navbar-header">
								<!-- Navbar Brand --><a href="index.html" class="navbar-brand d-none d-sm-inline-block">
									<div class="brand-text d-none d-lg-inline-block"><strong>电商用户分析可视化展示</strong></div>
									<div class="brand-text d-none d-sm-inline-block d-lg-none"><strong>BD</strong></div>
								</a>
								<!-- Toggle Button--><a id="toggle-btn" href="#"
									class="menu-btn active"><span></span><span></span><span></span></a>
							</div>
							<!-- Navbar Menu -->
							<ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
								<!-- Search-->
								<li class="nav-item d-flex align-items-center"><a id="search" href="#"><i
											class="icon-search"></i></a></li>

								<!-- Logout    -->
								<li class="nav-item"><a href="login.html" class="nav-link logout"> <span
											class="d-none d-sm-inline">Logout</span><i class="fa fa-sign-out"></i></a>
								</li>
							</ul>
						</div>
					</div>
				</nav>
			</header>
			<div class="page-content d-flex align-items-stretch">
				<nav class="side-navbar">
					<div class="sidebar-header d-flex align-items-center">
  <div class="avatar"><img src="img/static/头像.jpg" alt="..." class="img-fluid rounded-circle"></div>
  <div class="title">
    <h1 class="h4">李悦恒</h1>
    <p>联系方式：625338393@qq.com</p>
  </div>
</div>
					<!-- Sidebar Navidation Menus--><span class="heading">功能区</span>
					<ul class="list-unstyled">
						<li class="active"><a href="index.html"> <i class="icon-home"></i>主页 </a></li>
						<li><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i
									class="icon-interface-windows"></i>用户行为分析</a>
							<ul id="exampledropdownDropdown" class="collapse list-unstyled ">
								<li><a href="month4.html"> 每日用户行为分析</a></li>
								<li><a href="month5.html"> 每时段用户行为分析</a></li>
								<li><a href="month2.html"> 用户消费排行榜</a></li>
							</ul>
						</li>
						<li><a href="tables.html"> <i class="icon-grid"></i>用户价值分析</a></li>
						<li><a href="#exampledropdownDropdown1" aria-expanded="false" data-toggle="collapse"> <i
									class="icon-picture"></i>用户画像分析</a>
							<ul id="exampledropdownDropdown1" class="collapse list-unstyled ">
								<li><a href="charts.html"> </i>地区分布</a></li>
								<li><a href="month1.html"> </i>性别比例</a></li>
								<li><a href="month3.html"> </i>年龄分布 </a></li>
								<li><a href="forms.html"> </i>月活跃用户量分布</a></li>
							</ul>
				</nav>
				<div class="content-inner">
					<!-- Page Header-->
					<header class="page-header">
						<div class="container-fluid">
							<h2 class="no-margin-bottom">展示区</h2>
						</div>
					</header>
					<!-- Dashboard Counts Section-->
					<section class="dashboard-counts no-padding-bottom">
						<div class="container-fluid">
							<div class="row bg-white has-shadow">
								<!-- Item -->
								<div class="col-xl-3 col-sm-6">
									<div class="item d-flex align-items-center">
										<div class="icon bg-violet"><i class="icon-user"></i></div>
										<div class="title"><span>消费大省<br>No.1</span>
											<div class="progress">
												<div role="progressbar" style="width: 25%; height: 4px;"
													aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
													class="progress-bar bg-violet"></div>
											</div>
										</div>
										<div class="number"><strong>广东省</strong></div>
									</div>
								</div>
								<!-- Item -->
								<div class="col-xl-3 col-sm-6">
									<div class="item d-flex align-items-center">
										<div class="icon bg-red"><i class="icon-padnote"></i></div>
										<div class="title"><span>用户分布大省<br>No.1</span>
											<div class="progress">
												<div role="progressbar" style="width: 70%; height: 4px;"
													aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
													class="progress-bar bg-red"></div>
											</div>
										</div>
										<div class="number"><strong>广东省</strong></div>
									</div>
								</div>
								<!-- Item -->
								<div class="col-xl-3 col-sm-6">
									<div class="item d-flex align-items-center">
										<div class="icon bg-green"><i class="icon-bill"></i></div>
										<div class="title"><span>畅销产品<br>No.1</span>
											<div class="progress">
												<div role="progressbar" style="width: 40%; height: 4px;"
													aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
													class="progress-bar bg-green"></div>
											</div>
										</div>
										<div class="number"><strong>152092</strong></div>
									</div>
								</div>
								<!-- Item -->
								<div class="col-xl-3 col-sm-6">
									<div class="item d-flex align-items-center">
										<div class="icon bg-orange"><i class="icon-check"></i></div>
										<div class="title"><span> 消费排行<br>No.1</span>
											<div class="progress">
												<div role="progressbar" style="width: 50%; height: 4px;"
													aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"
													class="progress-bar bg-orange"></div>
											</div>
										</div>
										<div class="number"><strong>1187177</strong></div>
									</div>
								</div>
							</div>
						</div>
					</section>
					<!-- Dashboard Header Section    -->
					<section class="dashboard-header">
						<div class="container-fluid">
							<div class="row">
								<!-- Statistics -->
								<div class="statistics col-lg-3 col-12">
									<div class="statistic d-flex align-items-center bg-white has-shadow">
										<div class="icon bg-red"><i class="fa fa-tasks"></i></div>
										<div class="text"><strong>25.39%</strong><br><small>RMF模型<br>重要发展用户</small></div>
									</div>
									<div class="statistic d-flex align-items-center bg-white has-shadow">
										<div class="icon bg-green"><i class="fa fa-calendar-o"></i></div>
										<div class="text"><strong>99.9998%</strong><br><small>用户页面转化率</small></div>
									</div>
									<div class="statistic d-flex align-items-center bg-white has-shadow">
										<div class="icon bg-orange"><i class="fa fa-paper-plane-o"></i></div>
										<div class="text"><strong>0.0002%</strong><br><small>用户页面跳失率</small></div>
									</div>
									<!-- Numbers-->
									<div class="statistic d-flex align-items-center bg-white has-shadow">
										<div class="icon bg-green"><i class="fa fa-line-chart"></i></div>
										<div class="text"><strong>20.29%</strong><br><small>复购率</small></div>
									</div>
								</div>
								
								<!-- Line Chart           -->
								<div class="chart col-lg-6 col-12">
									<div class="line-chart bg-white d-flex align-items-center justify-content-center has-shadow">
										<div class="embed-responsive embed-responsive-16by9">
											<iframe class="embed-responsive-item" 
												src="./dataInterface/用户留存.HTML"></iframe>
										</div>
									</div>
								</div>
									<div class="chart col-lg-3 col-12">
										<!-- Bar Chart   -->
										<div class="bar-chart has-shadow bg-white">
											<div class="title"><strong
													class="text-violet">22时</strong><br><small>用户行为高峰</small></div>
											<canvas id="barChartHome"></canvas>
										</div>
										
									</div>
								</div>
							</div>
					</section>

					<!-- Page Footer-->
					<footer class="main-footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <p>@ 李悦恒 版权所有</p>
      </div>
      <div class="col-sm-6 text-right">
        <p></p>
      </div>
    </div>
  </div>
</footer>
				</div>
			</div>
		</div>
		<!-- JavaScript files-->
		<script src="vendor/jquery/jquery.min.js"></script>
		<script src="vendor/popper.js/umd/popper.min.js"> </script>
		<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
		<script src="vendor/chart.js/Chart.min.js"></script>
		<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
		<script src="js/charts-home.js"></script>
		<!-- Main File-->
		<script src="js/front.js"></script>
		<script>
  // 动态高亮导航栏并展开二级菜单
  $(function(){
    var path = location.pathname.split('/').pop();
    $('.side-navbar ul.list-unstyled li').removeClass('active');
    $('.side-navbar ul.list-unstyled li a').each(function(){
      var href = $(this).attr('href');
      if(href && path && href.indexOf(path) !== -1){
        $(this).parent().addClass('active');
        // 展开父级菜单
        var parentUl = $(this).closest('ul.collapse');
        if(parentUl.length){
          parentUl.addClass('show').addClass('in'); // 兼容不同Bootstrap版本
          parentUl.prev('a[data-toggle="collapse"]').attr('aria-expanded', 'true');
        }
      }
    });
    // 阻止二级菜单点击后自动收起
    $('.side-navbar ul.collapse a').on('click', function(e){
      var parentUl = $(this).closest('ul.collapse');
      if(parentUl.length){
        setTimeout(function(){
          parentUl.addClass('show').addClass('in');
          parentUl.prev('a[data-toggle="collapse"]').attr('aria-expanded', 'true');
        }, 10);
      }
    });
  });
</script>
		<style>
			.copyrights {
				text-indent: -9999px;
				height: 0;
				line-height: 0;
				font-size: 0;
				overflow: hidden;
			}
		</style>
	</body>
</html>